<template>
  <!-- 上方菜单 -->
  <div class="menus">
    <el-button type="success" @click="addVisible = true"
      ><el-icon><Plus /></el-icon>添加</el-button
    >
  </div>
  <!-- 数据呈现 -->
  <div class="info">
    <el-table :data="list" stripe>
      <el-table-column prop="bucketName" label="Bucket名称">
        <template #default="scope">{{ Tools.bucketName(scope.row.bucketName) }} </template>
      </el-table-column>
      <el-table-column prop="domains" label="跨域（防盗链）域名列表" />
      <el-table-column prop="info" label="Bucket描述信息" />
      <el-table-column prop="expiration" label="链接过期时间（秒）" />
      <el-table-column prop="endpoint" label="oss节点" />
      <el-table-column label="信息最后修改时间">
        <template #default="scope">
          {{ Tools.formatDate(scope.row.lastupdate) }}
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button type="danger" @click="del(scope.row)" size="small">删除</el-button>
          <el-button type="success" @click="showModify(scope.row)" size="small">修改</el-button>
        </template>
      </el-table-column>
    </el-table>
    <PageComp :page="page" @page-change="query"></PageComp>
  </div>

  <!-- 添加对话框 -->
  <el-dialog v-model="addVisible" title="添加bucket" @open="reset" @closed="query" @close="loading = false">
    <el-form>
      <el-form-item label="oss配置" label-width="15em">
        <el-button @click="configVisible = true" v-if="ossinfo">{{ ossinfo }}</el-button>
        <el-button @click="configVisible = true" v-else>选择配置</el-button>
        <!-- <el-input v-model="addInfo.ocid"></el-input> -->
      </el-form-item>
      <el-form-item label="oss节点" label-width="15em">
        <el-select v-model="addInfo.endpoint" placeholder="请选择节点">
          <el-option v-for="item in endpoints" :key="item.endpoint" :label="item.region" :value="item.endpoint" />
        </el-select>
      </el-form-item>
      <el-form-item label="Bucket名称" label-width="15em">
        <el-input v-model="addInfo.bucketName" />
      </el-form-item>
      <el-form-item label="跨域（防盗链）域名列表" label-width="15em">
        <el-input v-model="addInfo.domains" />
      </el-form-item>
      <el-form-item label="Bucket描述信息" label-width="15em">
        <el-input v-model="addInfo.info" />
      </el-form-item>
      <el-form-item label="链接过期时间（秒）" label-width="15em">
        <el-input-number v-model="addInfo.expiration" :min="60" :max="300" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="danger" @click="addVisible = false">
          <el-icon><Close /></el-icon> 关闭</el-button
        >
        <el-button type="primary" @click="add" v-loading="loading">
          <el-icon><Plus /></el-icon> 添加
        </el-button>
      </div>
    </template>
  </el-dialog>

  <!-- 修改对话框 -->
  <el-dialog v-model="modifyVisible" title="修改bucket" @closed="query()" @close="loading = false">
    <el-form>
      <el-form-item label="跨域（防盗链）域名列表" label-width="15em">
        <el-input v-model="modifyInfo.domains" />
      </el-form-item>
      <el-form-item label="Bucket描述信息" label-width="15em">
        <el-input v-model="modifyInfo.info" />
      </el-form-item>
      <el-form-item label="链接过期时间（秒）" label-width="15em">
        <el-input-number v-model="modifyInfo.expiration" :min="60" :max="300" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="danger" @click="modifyVisible = false">
          <el-icon><Close /></el-icon> 关闭</el-button
        >
        <el-button type="primary" @click="modify" v-loading="loading">
          <el-icon><Plus /></el-icon> 保存
        </el-button>
      </div>
    </template>
  </el-dialog>

  <!-- 配置选择对话框 -->
  <el-dialog v-model="configVisible" title="选择配置">
    <OssConfigComp @config-selected="selectConfig"></OssConfigComp>
  </el-dialog>

  <BackToHome />
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { ElButton, ElDialog, ElFormItem, ElMessage, ElTable, ElTableColumn, ElMessageBox, ElInputNumber } from 'element-plus'
import { BaseDataResult, BasePageVO, PageBean, BaseResult } from '../../ts/types/BaseResult'
import { Tools } from '../../ts/Tools'

import { TbOssBucket, OssEndPoint, TbOssConfig } from '../../ts/types/Oss'
import { ApiService } from '../../ts/ApiService'
import { log } from '../../ts/logger'
import OssConfigComp from '../../components/OssConfigComp.vue'
import PageComp from '../../components/PageComp.vue'
import BackToHome from '../../components/BackToHomeComp.vue'

const loading = ref(false)
const page = ref({ pageNumber: 1, pageSize: 5 } as PageBean)
const addInfo = ref({ expiration: 100 } as TbOssBucket)
const addVisible = ref(false)
const list = ref([] as Array<TbOssBucket>)
const endpoints = ref([] as Array<OssEndPoint>)
const configVisible = ref(false)

const ossinfo = ref('')

const selectConfig = (config: TbOssConfig) => {
  log.debug('选择的oss配置：', config)
  addInfo.value.ocid = config.ocid
  ossinfo.value = config.description
  configVisible.value = false
}

const reset = () => {
  ossinfo.value = ''
  addInfo.value = { expiration: 100 } as TbOssBucket
}

const queryEndpoints = () => {
  ApiService.get('/oss/config/endpoint', {}, (data: BaseDataResult<Array<OssEndPoint>>) => {
    if (data.success) {
      endpoints.value = data.data
      return
    }
    ElMessage.error(data.message)
  })
}

const add = () => {
  loading.value = true
  ApiService.post('/oss/bucket', addInfo.value, (data: BaseResult) => {
    loading.value = false
    data.success ? ElMessage.info(data.message) : ElMessage.error(data.message)
  })
}

const query = () => {
  ApiService.get(`/oss/bucket/${page.value.pageSize}/${page.value.pageNumber}`, {}, (data: BaseDataResult<BasePageVO<Array<TbOssBucket>>>) => {
    if (data.success) {
      list.value = data.data.data
      page.value = data.data.pageBean
      return
    }
    ElMessage.error(data.message)
  })
}

const modifyInfo = ref({} as TbOssBucket)
const modifyVisible = ref(false)

const showModify = (info: TbOssBucket) => {
  log.debug('修改的信息：', info)
  modifyInfo.value = JSON.parse(JSON.stringify(info))
  modifyVisible.value = true
}
const modify = () => {
  loading.value = true
  ApiService.put('/oss/bucket', modifyInfo.value, (data: BaseResult) => {
    loading.value = false
    data.success ? ElMessage.info(data.message) : ElMessage.error(data.message)
  })
}

const del = (info: TbOssBucket) => {
  log.debug('删除的信息：', info)
  ElMessageBox.confirm(`是否删除bucket：${info.bucketName}？`).then(() => {
    loading.value = true
    ApiService.delete(`/oss/bucket/${info.obid}`, {}, (data: BaseResult) => {
      query()
      ElMessage({
        message: data.message,
        icon: data.success ? 'info' : 'error',
      })
    })
  })
}

queryEndpoints()
query()
</script>
<style scoped lang="scss">
.menus {
  display: flex;
  justify-content: right;
  padding: 1rem;
}
.info {
  padding: 1rem;
}
</style>
